/*
 * Copyright (c) 2024 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import { View, Text, Image, StyleSheet, ImageBackground, Button, TouchableOpacity } from 'react-native';
import { useBreakpointValue } from '@hadss/react_native_adaptive_layout/src/hooks/useBreakpointValue';
import PlayIcon from '../../../../asset/svg/PlayIcon'

const PlaylistHeader: React.FC = () => {
    const imageNumber = '3456万';
    const playlistTitle = '轻快旋律：这里是疲倦灵魂栖息地';
    const playlistDescription = '怀旧使我快乐，人们总是以为自己的生活很枯燥/乏味，那是因为他们没有回过头来聆听那些曾陪伴过我们青春的旋律';

    const fourImages = [
        require('../../../../asset/love_count.png'),
        require('../../../../asset/download_count.png'),
        require('../../../../asset/commen_count.png'),
        require('../../../../asset/share.png')
    ];

    let paddingHorizontal = useBreakpointValue({
        base: 16,
        sm: 16,
        md: 24,
    });

    let optionsBtn = [
        {
            name: '歌曲',
            activeBtn: true
            // code: 'musicItem'
        },
        {
            name: '专辑',
            activeBtn: false
            // code: 'musicItem'
        },
        {
            name: '歌单',
            activeBtn: false
            // code: 'musicItem'
        },
        {
            name: '听书',
            activeBtn: false
            // code: 'musicItem'
        },
    ]
    return (
        <View  >
            {/* style={{ flexDirection: 'column', flex: 1 }} */}
            <View >
                <Image source={require('../../../../asset/back.png')} style={styles.backButton} />
            </View>
            <View style={styles.playlistInfo}>
                {optionsBtn.map((item, index) => (
                    <View key={index}>
                        <TouchableOpacity
                            style={styles.customButton}
                            onPress={() => { }}
                        >
                            <Text style={styles.buttonText}>{item.name}</Text>
                        </TouchableOpacity>
                    </View>
                ))}
            </View>
            <View style={[styles.listHeader, { paddingHorizontal: paddingHorizontal }]}>
                <PlayIcon style={styles.listHeaderImage} />
                {/* <Image source={require('../../../../asset/play_icon.svg')} style={styles.listHeaderImage} /> */}
                <Text style={styles.listHeaderText}>{'播放全部'}</Text>
                <View style={{ flex: 1 }} />
                <Image source={require('../../../../asset/show_all.png')} style={styles.openIcon} />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
    },
    backButton: {
        marginTop: 8,
        width: 40,
        height: 40,
        marginBottom: 15,
    },
    backButtonText: {
        color: '#fff',
        fontSize: 16,
    },
    playlistInfo: {
        flexDirection: 'row',
        // marginTop: 8,
        // height: 120
    },
    imageWrapper: {
        position: 'relative',
        marginRight: 15,
    },
    playlistImage: {
        width: 112,
        height: 112,
    },
    imageOverlay: {
        position: 'absolute',
        bottom: 12,
        left: 6,
    },
    imageNumber: {
        color: 'rgba(255, 255, 255, 0.86)',
        fontSize: 12,
    },
    playlistText: {
        flex: 1,
        justifyContent: 'center'
    },
    textTitle: {
        fontSize: 24,
        fontWeight: '700',
        color: 'rgba(255, 255, 255, 0.86)'
    },
    textDescription: {
        marginTop: 8,
        fontSize: 12,
        color: 'rgba(255, 255, 255, 0.6)',
        width: 200
    },
    author: {
        marginTop: 7,
        fontSize: 14,
        color: 'rgba(255, 255, 255, 0.6)',
    },
    imagesRow: {
        flexDirection: 'row',
        marginTop: 12,
        justifyContent: 'space-between',
        marginBottom: 32
    },
    fourImage: {
        width: 48,
        height: 48,
    },
    listHeader: {
        height: 48,
        flexDirection: 'row',
        alignItems: 'center',
        width: '100%',
        backgroundColor: 'rgb(239, 239, 239)',
    },
    listHeaderImage: {
        width: 32,
        height: 32,
    },
    listHeaderText: {
        left: 8,
        fontSize: 18,
        color: 'rgba(0, 0, 0, 0.9)',
        fontWeight: '700',
        lineHeight: 24
    },
    openIcon: {
        width: 20,
        height: 20,
        right: 0
    },
    customButton: {
        backgroundColor: 'rgb(255, 255, 255)',
        width: 98,
        height: 36,
        padding: 10,
        borderRadius: 18,
        marginRight: 8,
        justifyContent: 'center',
        alignItems: 'center',
    },
    buttonText: {
        color: 'rgba(0, 0, 0, 0.9)',
    }
});

export default PlaylistHeader;
